<template>
  <uni-swiper-dot :info="advList" :current="current" field="content" :mode="mode">
    <swiper class="swiper-box" @change="change">
      <swiper-item v-for="(item ,index) in advList" :key="index">
        <view class="swiper-item">
          <image :src="item.path" mode="aspectFit" class="width-fix"/>
        </view>
      </swiper-item>
    </swiper>
  </uni-swiper-dot>
  <view class="wcb-box-contain">
    <view class="wcb-site">
      <view class="wcb-site-gab">
        <view class="wcb-city" @click="siteSelect('home_start')">
          <view class="wcb-city-title">{{posData.startCity}}</view>
          <view class="wcb-pos-cur-icon">
            <image src="https://whaleoss.oss-cn-guangzhou.aliyuncs.com/city-bus/pos.png" mode="aspectFit" class="icon"/>
          </view>
        </view>
        <view class="wcb-label">{{posData.startSite}}</view>
      </view>
      <view class="wcb-site-md">
        <view class="wcb-change-icon"></view>
      </view>
      <view class="wcb-site-gab">
        <view class="wcb-city" @click="siteSelect('home_end')">
          <view class="wcb-city-title r">{{posData.endCity}}</view>
          <view class="wcb-pos-cur-icon"></view>
        </view>
        <view class="wcb-label">{{posData.endSite}}</view>
      </view>
    </view>
    <view class="wcb-site-btn-group">
      <view class="wcb-btn wcb-btn-main" @click="toSelectShift">查看班次</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      advList: [{
        path: 'https://fsfx-miniapp.oss-cn-guangzhou.aliyuncs.com/mini/banner.jpg'
      }, {
        path: 'https://pic.wuzjl.com/static-files/sf-banner.png'
      }],
      current: 0,
      mode: 'round',
      posData:{
        startCity: '佛山市',
        startSite: '同济地铁D出口',
        endCity: '广州市',
        endSite: '地铁三元里站（C1出口）公交线'
      }
    }
  },
  onLoad() {
    console.log(1);
  },
  methods:{
    change(e){

    },
    siteSelect(target){
      uni.navigateTo({
        url: '/pages/siteSelect/siteSelect?target=' + target,
        events:{
          acceptDataFromSiteSelect(fromRes){
            console.log('fromRes',fromRes)
          }
        }
      })
    },
    toSelectShift(){
      const _t = this;
      uni.navigateTo({
        url: '/pages/shiftSelect/shiftSelect',
        success(res){
          res.eventChannel.emit('fromHomeEvent', _t.posData);
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .width-fix{
    width: 100%;
    height: 300rpx;
  }

  .wcb-box-contain{
    background: #FFFFFF;
    margin: 20rpx;
    padding: 30rpx 30rpx 60rpx 30rpx;
    border-radius: 10rpx;
    border: 1px solid #f1f1f1;
  }

  .wcb-site{
    display: flex;
    width: 100%;
    padding: 24rpx 0;
    .wcb-site-gab{
      width: 45%;
      .wcb-city{
        display: flex;
        font-weight: bolder;
        font-size: 32rpx;
        line-height: 60rpx;
        .wcb-pos-cur-icon{
          position: relative;
          top: 8rpx;
          padding-left: 24rpx;
          .icon{
            width: 46rpx;
            height: 46rpx;
          }
        }
        .r{
          display: flex;
          width: 100%;
          justify-content: flex-end;
          padding-right: 20rpx;
        }
      }
      .wcb-label{
        font-size: 23rpx;
        color: #777777;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-bottom: 24rpx;
      }
    }
    .wcb-site-md{
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      justify-content: center;
      padding: 0 20rpx 0 0;
      .wcb-change-icon{
        width: 60rpx;
        height: 60rpx;
        background: url("https://whaleoss.oss-cn-guangzhou.aliyuncs.com/city-bus/change.png") no-repeat;
        background-size: cover;
      }
    }
  }

  .wcb-site-btn-group{
    .wcb-btn{
      border: none;
      color: white;
      text-align: center;
      line-height: 80rpx;
      height: 80rpx;
      border-radius: 10rpx;
      cursor: pointer;
    }
    .wcb-btn-main{
      background: #2979ff;
    }
  }

</style>
